<!DOCTYPE html>
<html>
<head>
	<!-- 公共页面 -->
	#include("../include/common.html")
	<!-- 公共页面 /-->
	<link rel="stylesheet" type="text/css" href="#(base)/admin/static/css/wechat.css" />
</head>
<body class="hold-transition skin-purple sidebar-mini">
    <div class="wrapper">
        <!-- 页面头部 -->
        #include("../include/header.html")
        <!-- 页面头部 /-->
        <!-- 导航侧栏 -->
        #include("../include/menu.html")
        <!-- 导航侧栏 /-->
        <!-- 内容区域 -->
        <div class="content-wrapper" id="contentDiv">
            <!-- 正文区域 -->
            <section class="content">
				<!-- .box-body -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">模板管理</h3>
                    </div>
                    <div class="box-body">
						<div id="app" class="row">
						    <div class="col-sm-12">
						        <div class="wechat-reply-wrapper wechat-menu">
						            <div class="ibox-content clearfix">
						                <div class="view-wrapper col-sm-4">
						                    <div class="mobile-header">公众号</div>
						                    <section class="view-body">
						                        <div class="time-wrapper"><span class="time">9:36</span></div>
						                    </section>
						                    <div class="menu-footer">
						                        <ul class="flex" id="wechatMenu">
						                        	#if(wechatMenus?? && wechatMenus.size()>0)
						                        	#for(wechatMenu : wechatMenus)
						                            <li>
						                                  <span data-id="#(wechatMenu.id)" data-name="#(wechatMenu.name)" data-type="#(wechatMenu.type)" #if(wechatMenu.type=="click") data-keywords="#(wechatMenu.keywords)" #else if(wechatMenu.type=="view") data-url="#(wechatMenu.url)" #else if(wechatMenu.type=="miniprogram")  data-miniappid="#(wechatMenu.miniappid)" data-miniurl="#(wechatMenu.miniurl)" data-minipath="#(wechatMenu.minipath)" #end><i class="icon-sub"></i>#(wechatMenu.name)</span>
						                                  <div class="sub-menu">
						                                      <ul>
								                                  #if(wechatMenu.subMenus?? && wechatMenu.subMenus.size()>0)
						                                          #for(subMenu : wechatMenu.subMenus)
						                                          <li><span data-id="#(subMenu.id)" data-name="#(subMenu.name)" data-type="#(subMenu.type)" #if(subMenu.type=="click") data-keywords="#(subMenu.keywords)" #else if(subMenu.type=="view") data-url="#(subMenu.url)" #else if(subMenu.type=="miniprogram")  data-miniappid="#(subMenu.miniappid)" data-miniurl="#(subMenu.miniurl)" data-minipath="#(subMenu.minipath)" #end>#(subMenu.name)</span></li>
						                                          #end
								                                  #end
								                                  #if(wechatMenu.subMenus.size()<5)
						                                          <li class="addTwo"><i class="icon-add"></i></li>
						                                          #end
						                                      </ul>
						                                  </div>
						                              </li>
						                              #end
						                              #for(i =0 ;i<(3-wechatMenus.size());i++)
						                              <li class="addOne"><i class="icon-add"></i></li>
						                              #end
						                              #else
						                              #for(i =0 ;i<3;i++)
						                              <li class="addOne"><i class="icon-add"></i></li>
						                              #end
						                              #end
						                        </ul>
						                    </div>
						                </div>
						                <div class="control-wrapper menu-control col-sm-8" id="menuDetail" style="display: none;">
						                    <section>
						                        <div class="control-main">
						                            <h3 class="popover-title">菜单名称 <a class="fr" href="javascript:void(0);" id="delete">删除</a></h3>
						                            <p class="tips-txt">已添加子菜单，仅可设置菜单名称。</p>
						                            <div class="menu-content control-body">
						                                <form action="" id="inputForm">
						                                    <div class="form-group clearfix">
						                                        <label for="" class="col-sm-2">菜单名称</label>
						                                        <div class="col-sm-9 group-item">
						                                            <input type="text" placeholder="菜单名称" class="form-control" id="name"/>
						                                            <span>字数不超过13个汉字或40个字母</span>
						                                        </div>
						                                    </div>
						                                    <div class="form-group clearfix">
						                                        <label class="col-sm-2 control-label tips" for="">规则状态</label>
						                                        <div class="group-item col-sm-9">
						                                            <select class="form-control m-b" id="type">
						                                                <option value="click">关键字</option>
						                                                <option value="view">跳转网页</option>
						                                                <option value="miniprogram">小程序</option>
						                                            </select>
						                                        </div>
						                                    </div>
						                                    <div class="menu-control-box" id="menuItem">
						                                        <!-- 文字消息 -->
						                                        <!-- 关键字 -->
						                                        <div class="keywords item" id="click" style="display: none">
						                                            <p>关键字</p>
						                                            <input type="text" placeholder="请输入关键字" class="form-control" id="keywords">
						                                        </div>
						                                        <!-- 跳转地址 -->
						                                        <div class="url item" id="view" style="display: none">
						                                            <p>跳转地址</p>
						                                            <input type="text" placeholder="请输入跳转地址" class="form-control" id="url">
						                                            <p class="text-left"></p>
						                                            <div class="well well-lg">
					                                                    <span class="help-block m-b-none">首页：http://www.jrecms.com</span>
						                                            </div>
						
						                                        </div>
						                                        <!-- 事件功能 -->
						                                        <!-- 小程序 -->
						                                        <div class="wrchat-app item" id="miniprogram" style="display: none">
						                                            <div class="list">
						                                                <p>appid</p>
						                                                <input class="form-control"type="text" id="miniappid"/>
						                                            </div>
						                                            <div class="list">
						                                                <p>备用网页url</p>
						                                                <input class="form-control"type="text" id="miniurl"/>
						                                            </div>
						                                            <div class="list">
						                                                <p>小程序路径</p>
						                                                <input class="form-control"type="text" id="minipath"/>
						                                            </div>
						                                        </div>
						                                    </div>
						                                </form>
						                            </div>
						                        </div>
						                    </section>
						                </div>
						            </div>
						            <!--工具栏-->
					                <div class="box-tools text-center">
					                    <button class="btn bg-maroon" type="button" id="publish">保存</button>
					                </div>
					                <!--工具栏/-->
						        </div>
						    </div>
					    </div>
                    </div>
                    <!-- /.box-body -->
                </div>
            </section>
            <!-- 正文区域 /-->
        </div>
        <!-- 内容区域 /-->
        <!-- 底部导航 -->
        #include("../include/footer.html")
        <!-- 底部导航 /-->
    </div>
</body>
</html>
<!---->
<script>
 $(document).ready(function() {
     // 激活导航位置
     setSidebarActive("admin-wechatMenu");
 });
</script>
<script type="text/javascript">
$().ready(function() {

	var $inputForm = $("#inputForm");
	
	//检查Form
	function checkForm(){
		var name = $("#name").val();
		if(isEmpty(name)){
			alert("请输入菜单名称!");
			return false;
		}
		var type = $("#type").val();
		if(type=="click"){
			var keywords = $("#keywords").val();
			if(isEmpty(keywords)){
				alert("请输入关键字!");
				return false;
			}
		}else if(type=="view"){
			var url = $("#url").val();
			if(isEmpty(url)){
				alert("请输入跳转地址!");
				return false;
			}
		}else if(type=="miniprogram"){
			var miniappid = $("#miniappid").val();
			if(isEmpty(url)){
				alert("请输入appid!");
				return false;
			}
			var miniurl = $("#miniurl").val();
			if(isEmpty(url)){
				alert("请输入备用网页url!");
				return false;
			}
			var minipath = $("#minipath").val();
			if(isEmpty(url)){
				alert("请输入小程序路径!");
				return false;
			}
		}
		//设置数据
		setMenuData();
		return true;
	}
	
	//设置菜单数据
	function setMenuData(){
		var name = $("#name").val();
		var type = $("#type").val();
		var current = $("#wechatMenu").find(".current");
		current.attr("data-name",name);
		current.attr("data-type",type);
		if(type=="click"){
			var keywords = $("#keywords").val();
			current.attr("data-keywords",keywords);
		}else if(type=="view"){
			var url = $("#url").val();
			current.attr("data-url",url);
		}else if(type=="miniprogram"){
			var miniappid = $("#miniappid").val();
			var miniurl = $("#miniurl").val();
			var minipath = $("#minipath").val();
			current.attr("data-miniappid",miniappid);
			current.attr("data-miniurl",miniurl);
			current.attr("data-minipath",minipath);
		}
	}
	
	//删除
	$("#delete").on("click",function(){
		var current = $("#wechatMenu").find(".current");
		if(current.parent().find("ul > li > span").length>0){
			alert("存在二级菜单不能删除!")
			return;
		}
		if(current.parent().find("ul").length>0){
			var html='<li class="addOne"><i class="icon-add"></i></li>';
			current.parent().replaceWith(html);
		}else{
			current.parent().remove();
		}
		$("#menuDetail").hide();
		$("#inputForm")[0].reset();
		
	});
	
	$("#publish").on("click",function(){
		if($("#wechatMenu").find(".current").length>0){
			if(!checkForm()){
				return;
			}
		}
		var data = getMenuData();
		$.ajax({
            url: "#(base)/admin/wechat_menu/update",
            type: "POST",
            data: {"data": JSON.stringify(data)},
            dataType: "json",
            cache: false,
            success: function(response) {
                if (response.type == "success") {
                    location.reload();
                }else{
                    swal({title:'', text:response.msg,icon: 'error'});
                }
            }
        });
	});
	
	//获取菜单数据
	function getMenuData(){
		var data = [];
		$("#wechatMenu > li > span").each(function(index,item){
			var json = getJsonData(index,item)
			var child = [];
			$(item).parent().find("ul > li > span").each(function(subIndex,subItem){
				child.push(getJsonData(subIndex,subItem));
			});
			json["child"]=child;
			data.push(json);
		});
		return data;
	}
	
	
	//获取json数据
	function getJsonData(index,item){
		var jsonStr = {};
		var id = $(item).attr("data-id");
		if(!isEmpty(id)){
			jsonStr["id"]=id;
		}
		var name = $(item).attr("data-name");
		jsonStr["name"]=name;
		var type = $(item).attr("data-type");
		jsonStr["type"]=type;
		if(type=="click"){
			var keywords = $(item).attr("data-keywords");
			jsonStr["keywords"]=keywords;
		}else if(type=="view"){
			var url = $(item).attr("data-url");
			jsonStr["url"]=url;
		}else if(type=="miniprogram"){
			var miniappid = $(item).attr("data-miniappid");
			var miniurl = $(item).attr("data-miniurl");
			var minipath = $(item).attr("data-minipath");
			jsonStr["miniappid"]=miniappid;
			jsonStr["miniurl"]=miniurl;
			jsonStr["minipath"]=minipath;
		}
		return jsonStr;
	}
	
	//点击某个菜单
	$("#wechatMenu").on("click","span",function(){
		if($(this).hasClass("current")){
			return;
		}
		if($("#wechatMenu").find(".current").length>0){
			if(!checkForm()){
				return;
			}
		}
		$("#menuDetail").show();
		$("#inputForm")[0].reset();
		$("#menuItem").find(".item").hide();
		$("#wechatMenu").find(".current").removeClass("current");
		$(this).addClass("current");
		var name = $(this).attr("data-name");
		var type = $(this).attr("data-type");
		$("#name").val(name);
		$("#type").val(type);
		if(type=="click"){
			var keywords = $(this).attr("data-keywords");
			$("#keywords").val(keywords);
			$("#click").show();
		}else if(type=="view"){
			var url = $(this).attr("data-url");
			$("#url").val(url);
			$("#view").show();
		}else if(type=="miniprogram"){
			var miniappid = $(this).attr("data-miniappid");
			var miniurl = $(this).attr("data-miniurl");
			var minipath = $(this).attr("data-minipath");
			$("#miniappid").val(miniappid);
			$("#miniurl").val(miniurl);
			$("#minipath").val(minipath);
			$("#miniprogram").show();
		}
	});
	
	//一级菜单添加
	$("#wechatMenu").on("click",".addOne",function(){
		if($("#wechatMenu").find(".current").length>0){
			if(!checkForm()){
				return;
			}
		}
		$("#wechatMenu").find(".current").removeClass("current");
		var html='<li><span class="current" data-parent="1"><i class="icon-sub"></i>一级菜单</span><div class="sub-menu"><ul><li class="addTwo"><i class="icon-add"></i></li></ul></div></li>';
		$(this).replaceWith(html);
		$("#menuDetail").show();
		$("#inputForm")[0].reset();
		$("#menuItem").find(".item").hide();
		$("#click").show();
	});
	
	//二级菜单添加
	$("#wechatMenu").on("click",".addTwo",function(){
		if($("#wechatMenu").find(".current").length>0){
			if(!checkForm()){
				return;
			}
		}
		var len = $(this).parent().find("li").length;
		if(len>=6){
			alert("二级菜单已经达到上限!");
			return;
		}
		$("#wechatMenu").find(".current").removeClass("current");
		var name = $("#name").val();
		var html='<li><span class="current" data-parent="0">二级菜单</span></li>';
		$(html).insertBefore($(this));
		$("#menuDetail").show();
		$("#inputForm")[0].reset();
		$("#menuItem").find(".item").hide();
		$("#click").show();
	});
	
	//名称
	$("#name").on("blur",function(){
		var name = $(this).val();
		if(isEmpty(name)){
			return false;
		}
		var current = $("#wechatMenu").find(".current");
		var parentId = current.attr("data-parent");
		if(parentId=="1"){
			var html = '<i class="icon-sub"></i>'+name+'</span>';
			current.html(html);
		}else{
			current.html(name);
		}
		
	});
	
	//类型改变
	$("#type").on("change",function(){
		$("#click").hide();
		$("#view").hide();
		$("#miniprogram").hide();
		var type = $("#type").val();
		$("#"+type).show();
	});

});
</script>
